<template>
  <div class="save-head">
    <span
      v-for="(item, index) in saveType"
      :class="projectActive == index ? 'active' : ''"
      :key="item"
      @click="onProject(index)"
      >{{ item.name }}</span
    >
  </div>
  <el-table
    v-if="projectActive == 0"
    border
    :data="list"
    style="width: 100%; margin-top: 40px"
  >
    <el-table-column property="gysNo" label="编号" align="center" />
    <el-table-column property="zhuyingyewu1" label="一级分类" align="center" />
    <el-table-column property="zhuyingyewu2" label="二级分类" align="center" />
    <el-table-column property="zhuyingyewu3" label="三级分类" align="center" />
    <el-table-column
      property="gongsimingcheng"
      label="公司全称"
      align="center"
    />
    <el-table-column
      property="chanpinshuliang"
      label="主打产品/数量"
      align="center"
    />
    <el-table-column
      property="yejishuliang"
      label="业绩案例/数量"
      align="center"
    />
    <el-table-column
      property="yewufuzeren"
      label="业务第一负责人"
      align="center"
    />
    <el-table-column
      property="jishufuzerenshuliang"
      label="技术第一负责人/数量"
      width="156"
      align="center"
    />
    <el-table-column
      property="jingyinglianxirenshuliang"
      label="经营联系人/数量"
      align="center"
    />
    <el-table-column label="操作" width="80" align="center">
      <template #default="scope">
        <el-button
          style="min-width: auto"
          link
          type="primary"
          size="small"
          @click.prevent="onOperation(scope.row, 'provider')"
          >详情</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-table
    v-if="projectActive == 1"
    border
    :data="list"
    style="width: 100%; margin-top: 40px"
  >
    <el-table-column property="cpNo" label="编号" align="center" />
    <el-table-column
      property="chanpinmingcheng"
      label="商品名称"
      align="center"
    />
    <el-table-column
      property="chanpinleixing1"
      label="一级分类"
      align="center"
    />
    <el-table-column
      property="chanpinleixing2"
      label="二级分类"
      align="center"
    />
    <el-table-column
      property="chanpinleixing3"
      label="三级分类"
      align="center"
    />
    <el-table-column property="jiage" label="价格" align="center" />
    <el-table-column property="gongyingshang" label="供应商" align="center" />
    <el-table-column label="操作" width="80" align="center">
      <template #default="scope">
        <el-button
          style="min-width: auto"
          link
          type="primary"
          size="small"
          @click.prevent="onOperation(scope.row, 'product')"
          >详情</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-table
    v-if="projectActive == 2"
    border
    :data="list"
    style="width: 100%; margin-top: 40px"
  >
    <el-table-column property="xmNo" label="编号" align="center" />
    <el-table-column
      property="xiangmumingcheng"
      label="项目名称"
      align="center"
    />
    <el-table-column
      property="chengshi"
      label="城市（省市区）"
      align="center"
    />
    <el-table-column property="xiangmuleixing" label="类型" align="center" />
    <el-table-column property="xiangmudizhi" label="项目地址" align="center" />
    <el-table-column property="zhuangtai" label="项目状态" align="center" />
    <el-table-column
      property="yunyingshang"
      label="项目运营商"
      align="center"
    />
    <el-table-column
      property="xiangmufuzeren"
      label="项目负责人"
      align="center"
    />
    <el-table-column label="操作" width="80" align="center">
      <template #default="scope">
        <el-button
          style="min-width: auto"
          link
          type="primary"
          size="small"
          @click.prevent="onOperation(scope.row, 'project')"
          >详情</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <h-page
    v-if="total"
    v-model:curr-page="params.current"
    :size="params.size"
    :total="total"
    @change="GetList"
  />
</template>
<script setup>
import { ref, defineProps } from "vue";
import { GetSaveProvider, GetSaveProduct, GetSaveProject } from "@/api/user";
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
  yhNo: {
    type: String,
    default: "",
  },
});
const params = ref({
  yhNo: props.yhNo,
  current: 1,
  size: 10,
});
// 用户
const projectActive = ref(0);
const saveType = [{ name: "公司/供应商" }, { name: "商品" }, { name: "项目" }];
const list = ref([]);
const total = ref(0);
const onProject = (index) => {
  projectActive.value = index;
  GetList();
};
// 操作
const onOperation = (row, type) => {
  if (type === "provider") {
    router.push({
      path: `/gongyingshang/detail`,
      query: {
        id: row.gysId,
      },
    });
  }
  if (type === "product") {
    router.push({
      path: `/chanpin/detail`,
      query: {
        id: row.cpId,
      },
    });
  }
  if (type === "project") {
    router.push({
      path: `/xiangmu/detail`,
      query: {
        id: row.xmId,
      },
    });
  }
};
const GetList = () => {
  if (projectActive.value == 0) {
    GetSaveProvider(params.value).then((res) => {
      if (res.code == 4201) {
        list.value = res.data.records;
        total.value = res.data.total;
      }
    });
  }
  if (projectActive.value == 1) {
    GetSaveProduct(params.value).then((res) => {
      if (res.code == 4201) {
        list.value = res.data.records;
        total.value = res.data.total;
      }
    });
  }
  if (projectActive.value == 2) {
    GetSaveProject(params.value).then((res) => {
      if (res.code == 4201) {
        list.value = res.data.records;
        total.value = res.data.total;
      }
    });
  }
};
GetList();
</script>
<style scope lang="scss">
.save-head {
  margin-top: 20px;
  span {
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    color: #333;
    &:not(:first-child) {
      margin-left: 40px;
    }
    &.active {
      color: skyblue;
    }
  }
}
</style>
